<template>

  <yd-ls-box style="overflow: auto">
    <div class="yd-ls-seekdetail-head">
      <div class="yd-ls-seekdetail-img">
        <img :src="seekDetail.head || defalut_img" />
      </div>
      <p>{{ seekDetail.name }}</p>
      <p>{{ seekDetail.cust_name }} <i v-if="seekDetail.title">|</i> {{ seekDetail.title }}</p>
      <a href="seek.html" class="yd-ls-seekdetail-arrow"></a>
      <i class="yd-ls-seekdetail-share" @click="handleShare">分享</i>
    </div>

    <yd-cell-group class="yd-ls-seekdetail-cell">
      <yd-cell-item type="a" href="index.html#/seekinfo" arrow>
      <!-- <yd-cell-item type="link" :href="{path:'seekinfo', query:{drid: seekDetail.drid}}" arrow> -->
        <span slot="left" style="font-weight: 600;position:relative">
          门诊信息
          <i class="yd-tabbar-dot" v-if="seekDetail.unread"></i>
        </span>
      </yd-cell-item>
    </yd-cell-group>
    <div class="yd-accordion yd-ls-seekinfo-accordion">
      <div @click="setRemarkIndex()" ref="remark">
        <div class="yd-accordion-head">
          <div class="yd-accordion-head-content">
            <div class="yd-accordion-title yd-accordion-title-full"><span style="font-size:.3rem; font-weight:600; padding-left:5px;">擅长</span></div>
          </div>
          <i class="yd-accordion-rotated"></i>
        </div>
        <div class="yd-accordion-content">
          <div>
            <div class="yd-ls-according-content"> {{ seekDetail.remark || '暂无数据' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="yd-accordion yd-ls-seekinfo-accordion">
      <div @click="setProfileIndex()" ref="profile">
        <div class="yd-accordion-head">
          <div class="yd-accordion-head-content">
            <div class="yd-accordion-title yd-accordion-title-full"><span style="font-size:.3rem; font-weight:600; padding-left:5px;">简介</span></div>
          </div>
          <i class="yd-accordion-rotated"></i>
        </div>
        <div class="yd-accordion-content">
          <div>
            <div class="yd-ls-according-content">{{ seekDetail.introduction || '暂无数据' }}</div>
          </div>
        </div>
      </div>
    </div>

    <yd-ls-flex-button>
      <yd-flexbox>
        <yd-flexbox-item v-for="(items,index) in seekVisit" :key="index">
          <button class="yd-btn yd-ls-seekdetail-btn"
                  :class="items.pay_type != 0 ? 'yd-btn-blue' : 'yd-btn-disabled'"
                  @click="goApply(seekDetail.drid, items.visit_type, items.visit_id, items.visit_remark, items.pay_type, seekDetail.name)">
            <div>{{ items.visit_remark }}咨询</div>
            <span>{{ items.pay_remark }}</span>
          </button>
        </yd-flexbox-item>
      </yd-flexbox>
    </yd-ls-flex-button>

    <div v-if="isShare" @click="handleGuide()">
      <div class="yd-share-body"></div>
      <div class="yd-share-guide"><img :src="share_img" alt=""></div>
    </div>
  </yd-ls-box>
</template>

<style>

  .yd-ls-according-content {
    padding: 0.24rem;
    line-height: 0.4rem;
    background-color:aliceblue;
  }

  .yd-ls-seekdetail-cell {
    margin-bottom: .15rem;
  }
  .yd-ls-seekdetail-btn {
    width: 100%;
    padding: 0;
  }
  .yd-ls-seekdetail-btn div {
    font-weight: 600;
    font-size: .3rem;
  }
  .yd-ls-seekdetail-btn span {
    font-size: .24rem;
  }
  .yd-ls-seekdetail-share {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 10;
    font-size: .3rem;
    color: #fff;
  }
  .yd-ls-seekdetail-arrow:after {
    position: absolute;
    top: 12px;
    left: -8px;
    z-index: 10;
    width: 1rem;
    height: 1rem;
    margin-left: .05rem;
    margin-right: -.08rem;
    display: block;
    font-family: YDUI-INLAY;
    font-size: .34rem;
    color: #FFF;
    content: "\E607";
  }
  .yd-ls-seekdetail-head{
    width:100%;
    overflow:hidden;
    text-align: center;
    padding-top: .8rem;
    background-color: rgb(72, 112, 243);
  }
  .yd-ls-seekdetail-head .yd-ls-seekdetail-img {
    display: inline-block;
    width: 1.14rem;
    height: 1.14rem;
    overflow: hidden;
    border-radius: 50%;
  }
  .yd-ls-seekdetail-head .yd-ls-seekdetail-img img {
    width: 100%;
    height: 100%;
  }
  .yd-ls-seekdetail-head p {
    font-size: 0.28rem;
    line-height: 0.54rem;
    color: #fff;
  }
  .yd-ls-seekdetail-accordion .yd-accordion-content {
    background-color: aliceblue;
  }
  .yd-ls-seekdetail-accordion .yd-accordion-title {
    font-weight: 600;
  }

  .yd-share-body {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 18888;
    background-color: #000000;
    opacity: 0.7;
  }
  .yd-share-guide {
    position: absolute;
    right: 18px;
    top: 5px;
    z-index: 19999;
  }
  .yd-share-guide img {
    width: 260px;
    height: 180px;
  }
</style>
<script>
  import ydLsBox from '../../components/yd-ls-box.vue'
  import ydLsLayout from '../../components/yd-ls-layout.vue'
  import ydLsFlexButton from '../../components/yd-ls-flexbutton.vue'
  import api from '../../axios/api'

  export default {
    name: 'seekdetail',
    data() {
      return {
        seekDetail: [],
        seekVisit: [],
        isShare: false,
        defalut_host: api.defalust_host, // 默认正式或测试主机域名
        defalut_img: api.default_img_dot, // 医生缺省头像,
        share_img: api.default_img_share // 分享指引
      }
    },
    created() {
      //TODO:初始化数据
      let _this = this
      let drid = sessionStorage.drid //this.$route.query.drid
      let drname = sessionStorage.drname
      let manme = sessionStorage.mname
      let mid = sessionStorage.mid
      this.getSeekDetail(drid)

      const getWxValid = () => {
        this.axios({
          method: "get",
          url: api.wx_valid,
          params: {
            pageurl: window.location.href
          }
        }).then(function(rsp) {
            wxconfig(rsp.data);
          }).catch(err=>{
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      };
      const wxconfig = datas => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: datas.appId, // 必填，公众号的唯一标识
          nonceStr: datas.nonceStr, // 必填，生成签名的随机串
          timestamp: datas.timestamp, // 必填，生成签名的时间戳
          signature: datas.signature, // 必填，签名，见附录1
          jsApiList: [ 'onMenuShareAppMessage','onMenuShareTimeline' ]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      };
      getWxValid()
      wx.ready(function(){
        // wx.hideOptionMenu();
        wx.onMenuShareTimeline({
          title: `我邀请您一起关注${drname}医生，可以为你提供一体化服务，扫码关注公众号即可加入使用！`,
          link: `${api.defalust_host}/yy/views/scan.html#/?type=0&drid=${drid}&mid=${mid}`,
          imgUrl: `${api.defalust_host}/img/login_logo.png`,
          success: function () { 
            // 用户确认分享后执行的回调函数
            _this.axios.get(api.seek_qrcode, {
              params: {
                mid: mid,
                drid: drid
              }
            }).then(function(rsp) {}).catch(err=>{
                alert('分享二维码出错');
              })
              alert('分享到朋友圈成功');
          },
          cancel: function () { 
            // 用户取消分享后执行的回调函数
            alert('你没有分享到朋友圈');
          }
        });
        wx.onMenuShareAppMessage({
          title: '邀请你加入六医卫',
          desc: `我邀请您一起关注${drname}医生，可以为你提供一体化服务，扫码关注公众号即可加入使用！`,
          link: `${api.defalust_host}/yy/views/scan.html#/?type=0&drid=${drid}&mid=${mid}`,
          imgUrl: `${api.defalust_host}/img/login_logo.png`,
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          },
          success: function (res) {
            _this.axios.get(api.seek_qrcode, {
              params: {
                mid: mid,
                drid: drid
              }
            }).then(function(rsp) {}).catch(err=>{
                alert('分享二维码出错');
              })
              alert('分享给朋友成功');
          },
          cancel: function (res) {
            alert('你没有分享给朋友');
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      });

      //TODO: 保证每次进入，都是第一个列表打开状态
      this.$nextTick(()=>{
        setTimeout(()=>{
          this.setShowIndex(0)
        },100)

      })
    },
    methods: {
      init() {

      },
      getSeekDetail(id) {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.seek_detail, {params: {id: id}})
          .then(m=>{
            let seek_detail_data = m.data
            this.seekDetail = seek_detail_data.data
            this.seekVisit = this.seekDetail.visits
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      goApply(drid, type, vid, vname, ptype, name) {
        if(type == 1){
          window.location = `index.html#/message?type=seekdetail&drid=${drid}&drname=${name}`
        }
        if(type != 1 && ptype != 0){
          sessionStorage.vName = vname
          sessionStorage.vType = type
          sessionStorage.vId = vid
          sessionStorage.vForm = 'seekdetail'
          window.location = 'apply.html'
        }
        return
      },
      setShowIndex(ref_name) {
        let remark = this.$refs.remark
        remark.children[1].style.height = ''
        remark.children[0].children[1].className = 'yd-accordion-rotated'

        let profile = this.$refs.profile
        profile.children[1].style.height = ''
        profile.children[0].children[1].className = 'yd-accordion-rotated'
      },
      setRemarkIndex() {
        let remark = this.$refs.remark
        let rHeight = remark.children[1].style.height
        if(rHeight == ''){
          remark.children[1].style.height = 0
          remark.children[0].children[1].className = ''
        }else {
          remark.children[1].style.height = ''
          remark.children[0].children[1].className = 'yd-accordion-rotated'
        }
      },
      setProfileIndex() {
        let profile = this.$refs.profile
        let pHeight = profile.children[1].style.height
        if(pHeight == ''){
          profile.children[1].style.height = 0
          profile.children[0].children[1].className = ''
        }else {
          profile.children[1].style.height = ''
          profile.children[0].children[1].className = 'yd-accordion-rotated'
        }
      },
      handleGuide() {
        this.isShare = false
        clearTimeout(stime)
      },
      handleShare() {
        if(!this.isShare) {
          this.isShare = true
        }
        this.handleTimeout()
      },
      handleTimeout() {
        global.stime = setTimeout(()=>{
          this.isShare = false
          clearTimeout(stime)
        },2000)
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsBox, ydLsLayout, ydLsFlexButton }


  }
</script>
